<template>
    <div>
        <h3>子组件</h3>
        <h1>post请求</h1>
        用户名：<input type="text" v-model="user_name" /><br />
        密码：<input type="text" v-model="password" /><br />
        <button @click="register">注册</button>
    </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
    mounted() { },
    data() {
        return {
            user_name: '',
            password: '',
        };
    },
    methods: {
        register() {
            axios({
                method: "post",
                url: "/register",
                baseURL: "http://localhost:8000",
                // form表单的content-Type  application/x-www-form-urlencoded;charset=utf-8
                // json: application/json
                // 二进制：multipart/form-data
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                },
                //在向服务器提交前，截住数据进行修改
                transformRequest: [
                    function (data) {
                        //qs  序列化数据的
                        let str = qs.stringify(data);
                        console.log(str);
                        return str;
                    },
                ],
                // 在传递给then  / catch前 修改响应数据
                transformResponse: [],
                // 与url一起发送的参数
                params: {},
                // 作为请求体被发送的数据
                data: {
                    user_name: this.user_name,
                    password: this.password,
                },
                timeout: 1000,
            })
                .then((res) => {
                    console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
}
</script>

<style lang="scss" scoped>

</style>